// 后台首页今日支出等模块
import React, { useState, useEffect, useRef } from 'react'
import './topgroup.scss'
import { Row, Col, Statistic } from 'antd'
import { Link } from 'react-router-dom'
import { serviceGetPanelData } from '../../../../request/paneldata'
;('/panel')
import {
  PropertySafetyFilled,
  ScheduleFilled,
  FileTextFilled,
  AlertFilled,
} from '@ant-design/icons'

/**
 * `useRef` 返回一个可变的 ref 对象，其 `.current` 属性被初始化为传入的参数（`initialValue`）。返回的 ref 对象在组件的整个生命周期内保持不变。而且 useRef 实现了类似 class 中的 `this` 的功能。
 * 使用场景：useRef( ).current 可以跨越渲染周期存储数据（在current 上增加属性存储对象，current 可以保存任何可变值，当其被赋值给 DOM 元素或组件的 ref 属性，current 会指向 DOM 元素或组件实例），
 * 而且对 current 修改也不会引起组件渲染。
 */
const PanelGroup = () => {
  const isInit = useRef<boolean>(false)
  const [state, setState] = useState([
    {
      title: '今日支出',
      total: 0,
      Icon: <PropertySafetyFilled className="icon" />,
      prefix: '￥',
      path: '/home/capitalFlow',
    },
    {
      title: '今日待办',
      total: 0,
      Icon: <ScheduleFilled className="icon" />,
      path: '/home/todayTask',
    },
    {
      title: '活动清单',
      total: 0,
      Icon: <FileTextFilled className="icon" />,
      path: '/home/activityList',
    },
    {
      title: '提醒事项',
      total: 0,
      Icon: <AlertFilled className="icon" />,
      path: '/home/reminder',
    },
  ])
  useEffect(() => {
    if (isInit.current) return
    isInit.current = true
    serviceGetPanelData().then(res => {
      if (res.data.success) {
        // 不能直接对state进行修改
        const data = state.slice()
        data[0].total = res.data.data.consumption
        data[1].total = res.data.data.todayTaskCount
        data[2].total = res.data.data.unfinishedTodoListCount
        data[3].total = res.data.data.reminderCount
        setState(data)
      }
    })
  }, [state])
  return (
    <Row
      className="panel-group"
      gutter={{ xs: 8, sm: 16, md: 24, lg: 32, xl: 40 }}
    >
      {state.map(item => (
        <Col xl={6} lg={12} md={12} sm={24} xs={24} key={item.title}>
          <Link className="block-item" to={item.path}>
            {item.Icon}
            <div className="data">
              <Statistic
                title={item.title}
                value={item.total}
                prefix={item.prefix}
              ></Statistic>
            </div>
          </Link>
        </Col>
      ))}
    </Row>
  )
}

export default PanelGroup
